<head>
  <title>login-demo</title>
</head>

<body>
  <div id="main">
    {{> main}}
  </div>
  <div id="readme">
    <p>This is a minimal app where you need to log in to see the database.  There's also a loading screen while logging in and until the initial data is loaded.</p>
    <p>There are three top-level screens corresponding to the three possible states of the app:</p>
    <ul>
      <li>Logging in / Loading &mdash; when <code>&#123;{loggingIn}}</code> is true</li>
      <li>Logged in &mdash; when there is a <code>&#123;{currentUser}}</code></li>
      <li>Logged out &mdash; otherwise</li>
    </ul>
    <p>If you reload the page while logged in, you'll start in the "logging in" state and see the "Loading..." message until the data loads.  Because logging in doesn't complete until all subscriptions have been rerun and finished loading, and the app only serves data when you're logged in, the "logging in" state encompasses loading the initial data for all subscriptions and is the only loading screen we need.</p>
    <p>To configure this app for Google auth, the easiest way is to add the <code>accounts-ui</code> package, add <code>&#123;{> loginButtons}}</code> to the end of the body, and use the configuration wizard.</p>
  </div>
</body>

<template name="main">
  {{#if loggingIn}}
    <div class="loading">Loading...</div>
  {{else}}
    {{#if currentUser}}
      <div class="msgDiv">
        Signed in as: {{currentUser.services.google.email}}
      </div>
      <a href="#" id="logout">Sign out</a>
    {{else}}
      <a href="#" id="login">Sign In With Google</a>
    {{/if}}
  {{/if}}
  <div class="msgDiv">
    Client can see {{numGizmos}} gizmos.
  </div>
</template>
